import React from 'react';
import { useContextSelector } from 'use-context-selector';

import { AppTypeEnum } from '@/types/app/type';

import AppContextProvider, { AppContext } from './context';

const Workflow = React.lazy(() => import('./components/Workflow'));

function AppDetail() {
  const { appDetail } = useContextSelector(AppContext, (e) => e);

  return (
    <div className="relative h-full">{appDetail.type === AppTypeEnum.workflow && <Workflow />}</div>
  );
}

function Provider() {
  return (
    <AppContextProvider>
      <AppDetail />
    </AppContextProvider>
  );
}

export default Provider;
